* {
    box-sizing: border-box;
  }

html{
    width: 100%;
}
    a:hover {
        background-color:red;
    }

body {
    width: 100%;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    margin: 0 auto;
    padding: 0;

}
.headercontainer{
    overflow: hidden;
    padding: 20px 10px;
    background:url(images/header.jpeg)  no-repeat;
    background-position: center ;
    background-size: cover;
    width: 100%;
    height: 30vh;
 }
#logoheader a{
    float: left;
    text-align: center;


}

#logo img{
    width: 10vmax;
    height: 16vh; 
    position: relative;
    top:15px;
    padding-bottom: 10px;
    margin-left: 20px;
}


#caption{
    padding-left: 15px;
    font-size: 2vmax;
    position: absolute;
    top: 17vh;
    text-align: center;
    color: #FFFF33;
    font-family: Comic Sans MS;
    padding-bottom: 5px;

    
}
ul{
    margin: 0;
    padding: 0;

}
header{
    min-height: 70px;
    border-bottom: #e8491d 3px solid;
}
header a{
    text-decoration: none;
    text-transform: uppercase;
    font-size: 2vw;
}

.box > button > img{
    width: 40%;
}
header nav{
    float: right;
    line-height: 2rem;
    font-family: Comic Sans MS;
}
    #nav ul li{
        list-style: none;
        float: left;
        margin:0 auto; 
        text-align: center;
        margin-top: 5px;
}
footer {
    background: dimgray;
    position: relative;
    bottom: 0px;
    width: 100%;
    padding-top: 0.3em;
    text-align: center;
    font-size: 1vmax;
}
.listview h1{
    display: block;
    font-size: 3vw;
}

#boxes{
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    flex-wrap: wrap;
    text-align: center;
}

#FeeCa{
    /*display: flex;*/
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    flex-wrap: wrap;
    text-align: center;
}

#FeeCa-result{
	width:466px;
	padding:20px;
	text-align: center;
	float:left;
}
.contactTableBox{
	overflow:hidden;
	height:430px;
	margin:50px 15px;
	padding-top:40px;
}
.contactTableBox .contactTable{
	width:100%;
}
.contactTableBox span.error{
	color:red;
}
#FeeCa span{
	padding-left:10px;
}
#FeeCa label{
	margin-top:10px;
}
#FeeCa input{
	margin-top:10px;
}
/*#boxes ::after{*/
    /*content: "";*/
    /*display: block;*/
    /*clear: both;*/
/*}*/
.containerlistview ul{
    display: flex;
    flex-wrap: wrap;
}
.containerlistview >ul >li{
    display: flex;
    width: 30%;
    height: auto;
    min-width: 200px;
    margin: 10px;
}


.box button{
    border: solid deepskyblue;
    background-color: #bbbbbb;
    height: 200px;
}
.box button:focus{
    background-color: turquoise;
}
.box div{
    display: block;
}
.box img{
    display: block;
    width: 45%;
    min-width: 80px;
    min-height: 80px;
    float: left;
    margin: 10px;
}
.box p{
    display: inline-block;
    width: 45%;
    padding-top: 10px;
    text-align: center;
    font-size: 14px;
}
.listview ul{
    list-style-type: none;
}

#main{
   display: flex;
    width: 100%;
    margin:0 auto;

}
#header{
    display: flex;
    background:url(images/header.jpeg);
    width: 100%;
    height: 240px;
    background-size:100% 100%;
    margin:0 auto;

}
#logo{
    width: 160px;
    height: 160px;
    margin-left: 25px;
}
#logotext{
    color: #FFFF33;
    margin-left: 50px;
    font-family: Comic Sans MS;
}
#nav{
    width: 100%;
    height: 50px;
    margin:0 auto;
    margin-top: 2px;
    background-color: dimgray;
}
#nav ul{
    width: 100%;
    height: 100%;
    margin:0 auto;

}
#nav ul li{
    width: 20%;
    list-style: none;
    float: left;
    margin:0 auto;
    text-align: center;
    margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
}
#nav ul li a:link{
    color: aliceblue;
    text-decoration:none;
}
#nav ul li a:active{
    color: aliceblue;
    text-decoration:none;
}
#nav ul li a:hover{
        color:red;


}

#nav ul li a:visited{
    color: aliceblue;
    text-decoration:none;
}

#nav ul li a:hover{
    color: aliceblue;
    text-decoration:none;
}
@media screen and (max-width: 620px) {
    .containerlistview{
        margin-left: 50px;
    }
    .indexcontainer #show{
        width: 95%;
        margin:0 auto;
        text-align: center;
    }
    .indexcontainer #show #photo img{
        width: 60%; float: left;
        margin-left: 15vw;
    }

    .indexcontainer #content{
        width: 100%;
        display:inline-block;
        padding-right: 25px;
        float: left;
        text-align: center;
        font-family: Comic Sans MS;

        min-width: 270px;
    }

}
@media screen and (max-width: 890px) {
    .box > button > p{
        width: 100%;
    }
    .box > button > img{
        margin-left: 50px;
    }
}

#show{
    width: 95%;
    margin:0 auto;
    text-align: center;
    float: left;
}
/*#show #photo{*/
    /*width: 45%;*/
/*}*/
#show #photo img{
    width: 45%; float:left;
}

#content{
    width: 50%;
    display:inline;
    margin:0 auto;
    float: right;
    text-align: center;
    font-family: Comic Sans MS;
    min-width: 267px;
}
#content h3{

    font-size: 3vw;
}

#content p{
    margin-left: 10px;
    margin-right: 10px;
    font-size: 2vw;
    font-family: Comic Sans MS;
}
.indexcontainer #map{
    display: flex;
    width: 95%;
    float: left;
}
.indexcontainer #transport{
    width: 100%;
    text-align: left;
    padding-left: 1vw;
}

#transport img{

    width: 30%;
    max-width: 150px;

    margin-left: 25px;
    margin-top: 25px;
}

#mapleft{
    width: 30%;
    float: left;
    padding-right: 20px;
}
#mapleft img{

    width: 25%;
    min-width: 50px;
    min-height: 50px;
    margin-left: 25px;
    margin-top: 1vh;
    float: left;
}
#mapright{
    width: 65%;
    float: right;
}
#mapright img{
    width: 100%;
    height: 100%;
    background-color: aqua;
    float: left;
}
[type="date"] {
    background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
}
[type="date"]::-webkit-inner-spin-button {
    display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
}

/* custom styles */

/*label {
    display: block;
}
*/
input {
    border: 1px solid #c4c4c4;
    border-radius: 5px;
    background-color: #fff;
    padding: 3px 5px;
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
    width: 190px;
}

.indexcontainer{
    display: flex;
    width: 90%;
    margin: 0 auto;
    padding: 20px;
    flex-wrap: wrap;
    text-align: center;
}
p.note{
	clear:both;
    padding: 20px;
}



@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #ccc;
    }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
    Label the data
    */
    td:nth-of-type(1):before {
        content: "Type";
    }

    td:nth-of-type(2):before {
        content: "AID";
    }

    td:nth-of-type(3):before {
        content: "Per Night";
    }

    td:nth-of-type(4):before {
        content: "Extra adult";
    }

    td:nth-of-type(5):before {
        content: "Extra child";
    }
}


#page-wrap {
    margin: 50px;
}
p {
    margin: 20px 0;
}

/*
Generic Styling, for Desktops/Laptops
*/
table {
    width: 95%;
    border-collapse: collapse;
    line-height: 6vmin;
}
/* Zebra striping */
tr:nth-of-type(odd) {
    background: #eee;
}
td:nth-child(2){
}
th {
    background: #333;
    color: white;
    font-weight: bold;
}
td, th {
    margin: 2px;
    border: 1px solid #ccc;
    text-align: left;
}
#FeeCa-result input[type='number']{
	width:60px;	
}
.contactDetails{
	float:left;
	padding-left:20px;
}
.contactDetails img{
	margin-right:15px;
}
.contactMsgBox{
	padding: 20px;
    overflow: hidden;
    text-align: right;
    padding-right: 28px;
}
.contactMsg span.error{
	color:red;
}
.listview span.error{
	color:red;
}
.contactMsg input[type='radio'],.RememberMe input[type='checkbox']{
	width:20px;
	border:none;
}
.contactTable{
	margin:20px auto;
}